<template>
  <div class="payment-container max-w-8xl mx-auto px-4 pt-16 pb-32 sm:px-6 lg:px-4">
    <svg-icon className="block w-14 h-14 mx-auto"
      :isDiv="true"
      iconName='check'></svg-icon>
    <h1 class="text-34 text-gray-1000 text-center font-semibold mt-3 leading-normal">
      {{$t('update_submitSuccess')}}
    </h1>
    <p class="text-base text-gray-1000 text-center mt-3">{{$t('update_thankYouFor')}}</p>
    <p class="text-base text-gray-1000 text-center mt-5 max-w-xl mx-auto">{{$t('update_ifTheReview')}}</p>

    <div class="ctrl flex justify-center gap-3 mt-10">
      <common-link path="/update-ai"
        class="inline-flex w-auto h-10 px-4 text-purple-1300 text-lg items-center justify-center border border-purple-1300 hover:bg-purple-2600 rounded">
        {{ $t('update_buyAgain')}}
      </common-link>
      <common-link path="/user?tab=updateAi"
        class="inline-flex w-auto h-10 px-4 text-white text-lg items-center justify-center bg-purple-1300 hover:opacity-90 rounded">
        {{ $t('update_viewYourRecords')}}
      </common-link>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'SubmitSuccess',
  head() {
    return {
      htmlAttrs: {
        lang: this.locale,
      },
      meta: [
        {
          hid: 'og:url',
          name: 'og:url',
          content: this.canonicalLink,
        },
      ],
      link: [
        {
          rel: 'canonical',
          href: this.canonicalLink,
        },
      ],
    }
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
      toolify_isLogin: (state) => state.toolify_isLogin,
    }),
  },
  created() {},
  data() {
    return {
      canonicalLink: `https://www.toolify.ai${this.$route.fullPath}`,
    }
  },
}
</script>
